<template>
  <div>
      <el-dialog :title="obj.title" :visible.sync="obj.isShow" width="70%">
        <el-form :model="form" style="overflow:hidden;" ref="form" :rules="rules">
            <el-form-item label="作者" prop="name" :label-width="formLabelWidth" :style="itemStyle">
                <el-input v-model="form.name" size="small" auto-complete="off" :style="style"></el-input>
            </el-form-item>
            <el-form-item label="等级" :label-width="formLabelWidth" :style="itemStyle">
                <el-select v-model="form.grade" size="small" placeholder="请选择" :style="style">
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                    <el-option label="3" value="3"></el-option>
                    <el-option label="4" value="4"></el-option>
                    <el-option label="5" value="5"></el-option>
                    <el-option label="6" value="6"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="简介" prop="desc" :label-width="formLabelWidth" style="clear:left;margin-bottom:12px;">
                <el-input type="textarea" v-model="form.desc" row="5"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="obj.isShow = false" size="small">取 消</el-button>
            <el-button type="primary" @click="addSuccess('form')" size="small">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>
<script>
    import api from '../api'
    export default{
        mounted(){
            
        },
        props:['obj','getAuthor'],
        methods:{
            addSuccess(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        api.$http('/system/setAddAuthor',this.form,function(err,res){
                            if(res.data.code==1){
                                this.getAuthor();
                                this.obj.isShow=false;
                                this.form={
                                    name:"",
                                    grade:"1",
                                    desc:""
                                };
                                return true;
                            }
                        }.bind(this));
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        },
        data(){
            return {
                form:{
                    name:"",
                    grade:"1",
                    desc:""
                },
                rules:{
                    name: [
                        { required: true, message: '请输入书名', trigger: 'blur' },
                        { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                    ],
                    desc: [
                        { required: true, message: '请输入简介', trigger: 'blur' },
                        { min: 1, max: 400, message: '长度在 1 到 400 个字符', trigger: 'blur' }
                    ]
                },
                style:{
                    width:"193px",
                    float:"left"
                },
                itemStyle:{
                    float:"left",
                    marginBottom:"10px"
                },
                formLabelWidth:"70px"
            }
        }
    }
</script>
<style>
    .el-dialog__body{
        padding:20px;
    }
    .el-form-item__error{
        padding-top:0;
    }
</style>
